<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 
    目前对于界面布局我们已经学习了多种方式: 定位、浮动、fex布局。
    flex布局相对于前面的布局来说更加的强大，并且目前对于我们的需求都是可以很好的完成。
    口但是flex是一个一维的布局方案 ( one-dimensional layout )
    口它主要的布局是在主轴(main axis) 上进行操作，当然也提供了一些交叉轴(cross axis)属性CSS为了进一步增强自己的布局能力，提供了grid布局:
    口 CSS Grid Layout (又名“Grid”或“CSS Grid") 是一种基于二维的布局系统(two-dimensionallayout);口 它更加强大，同时也更加复杂;
    目前公司生产环境的项目基本都是使用flex布局为主，因为它兼容性比fex布局差一些，所以grid布局暂时作为了解即可,
    */
    .container{
        display: grid;
        /*                    第一列的一个盒子   中间充满   第三列的盒子   */
        grid-template-columns: 100px 1fr 100px;
        /*                  重复2次   高度为100px                         */
        grid-template-rows: repeat(2,100px);
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <script src="../布局-flex/itemRandomColor.js"></script>
</body>
</html>